<template>
  <div class="frame"
       :style="{
        width: width,
        height: height,
        overflow: overflow,
        backgroundImage: `url(${backgroundImage})`,
        backgroundSize: backgroundSize,
        backgroundPosition: backgroundPosition,
        padding: `${padding.join('px ')}px`}">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'zz-frame',
    props: {
      width: {
        type: String,
        default: '50px'
      },
      height: {
        type: String,
        default: '50px'
      },
      overflow: {
        type: String,
        default: 'visible'
      },
      padding: {
        type: Array,
        default: function () {
          return [20, 20, 20, 20]
        }
      },
      backgroundImage: {
        type: String,
        default: ''
      },
      backgroundPosition: {
        type: String,
        default: 'right bottom'
      },
      backgroundSize: {
        type: String,
        default: '100%'
      }
    }
  }
</script>

<style scoped lang='scss'>
  .frame{
    box-sizing: border-box;
    background-repeat: no-repeat;
  }
</style>
